import React, { useEffect, useState } from "react";
import { Tabs } from "antd-mobile";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { Card, Col, Row } from "antd";
import AlsList from "../../compontents/AlsList";
function Home() {
  const navigate = useNavigate();
  const [lists, setLists] = useState([]);

  const getdata = async () => {
    const res = await axios.get("/api/article/list");
    console.log(res);
    setLists(res.data.rows);
  };
  useEffect(() => {
    getdata();
  }, []);

  // go
  const goxq = (id)=>{
    navigate(`/deatil/${id}`)
  }
  return (
    <div>
      <div style={{ width: "250px" }}>
        <Tabs>
          <Tabs.Tab title="sky" key="fruits">
            {lists.map((v, i) => {
              return <AlsList v={v} key={i} onClick={()=>{
                goxq(v.id)
              }}></AlsList>;
            })}
          </Tabs.Tab>
          <Tabs.Tab title="zippe" key="vegetables">
            tomato
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

export default Home;
